import { Input, Button, message } from 'antd'
import { ImportantEditModal } from "@/desktop/components"
import { API } from '@/services/common/api'


export default function EditPassword({ accountId, onClose }: { accountId: string | null, onClose: () => void}) {
  return <ImportantEditModal title="修改密码" open={accountId !== null} onCancel={onClose}>
    {accountId !== null ? <Content accountId={accountId} onClose={onClose} /> : null}
  </ImportantEditModal>
}

function Content({ accountId, onClose }: { accountId: string, onClose: () => void }) {
  const [password, setPassword] = useState('')
  const [saving, setSaving] = useState(false)
  async function save() {
    setSaving(true)
    const res = await API('/User/ModifyPassword', { data: { id: accountId, password }})
    setSaving(false)
    if (res.success) {
      void message.success('修改成功')
      onClose()
    } else {
      void message.error(res.error || '修改失败')
    }
  }

  return <div css={wrap}>
    <Input className="input" type="password" placeholder="输入新密码" value={password} onChange={e => setPassword(e.target.value)} />
    <footer>
      <Button type="primary" onClick={save} loading={saving}>保存</Button>
    </footer>
  </div>
}

const wrap = css`
  padding: 20px 20px 0 20px;
  .input  {
    margin-bottom: 20px;
  }
  footer {
    text-align: right;
  }
`
